<script setup>
import { computed, ref } from 'vue'
import { lunar } from '@/assets/lunar.js';
import PerWeek from '@/assets/img/perWeek.png'
import NextWeek from '@/assets/img/nextWeek.png'
import Clock from '@/assets/img/clock.png'
import { useRouter, useRoute } from 'vue-router'
import { Toast } from 'vant';
import axios from 'axios'
const weeks = ['日', '一', '二', '三', '四', '五', '六']
const calendar = ref(null);
const router = useRouter();
const route = useRoute();
const id = route.query.id;
const userId = route.query.userId;
const data = ref({})
const getData = async () => {
  let formData = new FormData();
  formData.append('userId', userId);
  formData.append('id', id);
  let obj = {}
  if (typeof AOS == 'object') {
    let userInfo = JSON.parse(AOS.getUserInfo())
    obj = {
      headers: {
        'Authorization': 'Bearer' + ' ' + userInfo.token
      }
    }
  }
  const res = await axios.post('/TrueIDS/remind/getReMindDetail', formData, obj)
  if (res) {
    data.value = res.data.obj
  }
}
getData()
const showLunar = (date) => {
  if (!date || !date.day) return;

  const lunarObj = lunar.solar2lunar(date.year, date.month + 1, date.day);

  return lunarObj.festival || lunarObj.lunarFestival || lunarObj.IDayCn;
};

const changeYearOrMonth = (isYear, type) => {
  console.log(isYear, type)
  if (!isYear) {
    if (type === 'up') {
      calendar.value.lastMonth();
    } else {
      calendar.value.nextMonth();
    }
  } else {
    if (type === 'up') {
      curYear.value = Number(curYear.value) - 1
    } else {
      curYear.value = Number(curYear.value) + 1
    }
    calendar.value.reset(new Date(curYear.value, curMonth.value - 1));
  }
}
const curYear = ref('')
const curMonth = ref('')
const formatYearMonth = () => {
  var date = new Date()
  curYear.value = date.getFullYear();
  curMonth.value = ('0' + (date.getMonth() + 1)).slice(-2);
  return `${curYear.value}年${curMonth.value}月`;
}
const curYearMonth = ref(formatYearMonth())
const dataList = ref([1, 2, 3, 4, 5, 6])

const dataChange = (data) => {
  console.log(data)
  curYear.value = data.substring(0, 4)
  curMonth.value = data.substring(5, 7)
  curYearMonth.value = curYear.value + '年' + curMonth.value + '月'
}
const jumpAddRc = () => {
  router.push({
    path: '/zjrc',
    query: {
      userId: userId,
      id: id
    }
  })
}
const deleteRc = () => {
  let formData = new FormData();
  formData.append('userId', userId);
  formData.append('id', id);
  let obj = {}
  if (typeof AOS == 'object') {
    let userInfo = JSON.parse(AOS.getUserInfo())
    obj = {
      headers: {
        'Authorization': 'Bearer' + ' ' + userInfo.token
      }
    }
  }
  axios.post('/TrueIDS/remind/deleteReMind', formData, obj)
    .then(response => {
      console.log(response.data)
      if (response.data.success) {
        Toast(response.data.msg);
        router.go(-1)
      } else {
        Toast(response.data.msg);
      }
    })
    .catch(error => {
      console.error(error);
    });
}
</script>

<template>
  <Header class="header" :isBack="true" name="日程安排" myTitle="查看日程" :isSearch="false" :isDelete="true" :isEdit="true"
    :isRili="false" :isComplete="false" :userId="userId" @addRc="jumpAddRc" @deleteRc="deleteRc"></Header>
  <div class="richengDiv">
    <div class="item">
      <div class="itemLeft">日程时间</div>
      <div class="itemRight">{{ data.startTime }}</div>
    </div>
    <div class="item">
      <div class="itemLeft">日程事项</div>
      <div class="itemRight">{{ data.content }}</div>
    </div>
    <div class="item">
      <div class="itemLeft">提醒时间</div>
      <div class="itemRight">{{ data.txsj }}</div>
    </div>
    <div class="item">
      <div class="itemLeft">办结标识</div>
      <div class="itemRight">{{ data.is_complete == 1 ? '已办' : '未办' }}</div>
    </div>
    <div class="item">
      <div class="itemLeft">备注</div>
      <div class="itemRight">{{ data.remark ? data.remark : '无' }}</div>
    </div>
  </div>
</template>
<style scoped>
.header {
  height: 60px;
  flex-shrink: 0;
}

.richengDiv {
  display: flex;
  flex-direction: column;
  background: white;

  .item {
    display: flex;
    width: 100%;
    padding: 20px 12px;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 0.5px solid #E3E3E3;

    .itemLeft {
      width: 100px;
      color: #000000;
      font-size: 16px;
      flex-shrink: 0;
    }

    .itemRight {
      flex-grow: 1;
      color: #909DB6;
      font-size: 16px;
      text-align: end;
    }
  }
}
</style>
